<template>
    <div class="product-container">
        <ul class="product-list">
            <li class="product-item">
                <div class="product-image"><img src="/api/placeholder/200/200" alt="产品图片" /></div>
                <div class="product-specs">
                    <div class="spec-item">
                        <span class="spec-label">屏幕尺寸:</span>
                        <span class="spec-value">1280*760</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">电池:</span>
                        <span class="spec-value">6000mAh</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">处理器:</span>
                        <span class="spec-value">骁龙8 Gen 2</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">内存:</span>
                        <span class="spec-value">8GB+256GB</span>
                    </div>
                </div>
            </li>
            <!-- 重复的产品项，只是改变一些值 -->
            <li class="product-item">
                <div class="product-image"><img src="/api/placeholder/200/200" alt="产品图片" /></div>
                <div class="product-specs">
                    <div class="spec-item">
                        <span class="spec-label">屏幕尺寸:</span>
                        <span class="spec-value">1920*1080</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">电池:</span>
                        <span class="spec-value">5000mAh</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">处理器:</span>
                        <span class="spec-value">骁龙8+ Gen 1</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">内存:</span>
                        <span class="spec-value">12GB+512GB</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
.product-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.product-item {
    flex: 0 0 calc(20% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 8px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-specs {
    width: 100%;
    text-align: left;
}

.spec-item {
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
}

.spec-label {
    color: #999;
    margin-right: 5px;
    min-width: 70px; /* 标签固定宽度，保持对齐 */
}

.spec-value {
    color: #333;
    flex: 1;
}

/* 响应式处理 */
@media (max-width: 1200px) {
    .product-item {
        flex: 0 0 calc(25% - 15px); /* 小屏幕每行4个 */
    }
}

@media (max-width: 768px) {
    .product-item {
        flex: 0 0 calc(33.33% - 14px); /* 更小屏幕每行3个 */
    }
}
</style>
